<template>
  <div class="big_div1">
    <!-- 第一行 -->
    <div class="line11">
      <div class="line11_1">
        <!-- 标题 -->
        <div class="linetitle1">
          当前签约信息
          <a @click="editor">&nbsp;&nbsp;编辑</a>
        </div>

        <!-- 签约信息展示 -->
        <!-- 第二行数据 -->
        <div class="msgg">
          <!-- 签约编号 -->
          <div class="cardd">
            <p class="name">
              <span>签约编号</span>
            </p>
            <p class="msg_data">
              <span >{{ signInformation.record_id }}</span>
            </p>
          </div>
          <!-- 签约状态 -->
          <div class="cardd">
            <p class="name">
              <span>签约状态</span>
            </p>
            <p class="msg_data">
              <span>{{ signInformation.record_state==1?  "待审核" : signInformation.record_state==2?  "待服务":"以驳回" }}</span>
              
            </p>
          </div>
          <!-- 签约机构 -->
          <div class="cardd">
            <p class="name">
              <span>签约机构</span>
            </p>
            <p class="msg_data">
              <span>{{
                signInformation.record_organization==1?  "罗西社区服务中心" : signInformation.record_organization==2?  "天明社区服务中心":"民进社区服务中心"
              }}</span>
            </p>
          </div>
          <!-- 签约团队 -->
          <div class="cardd">
            <p class="card_1">
              <span>签约团队</span>
            </p>
            <p class="msg_care">
              <span>{{ signInformation.record_doctor_team==1?  "李维团队" : signInformation.record_doctor_team==2?  "胡曼团队":"王皓团队" }}</span>
               
            </p>
          </div>
        </div>
        <!-- 第二行数据 -->
        <div class="msgg">
          <!-- 签约医生 -->
          <div class="cardd">
            <p class="name">
              <span>签约医生</span>
            </p>
            <p class="msg_data">
              <span>{{ signInformation.record_doctor }}</span>
            </p>
          </div>
          <!-- 服务包 -->
          <div class="cardd">
            <p class="name">
              <span>服务包</span>
            </p>
            <p class="msg_data">
              <span>{{ signInformation.record_server==1?  "0-6岁儿童服务包" : signInformation.record_server==2?  "老年人服务包":"慢性病护理包" }}</span>
              
            </p>
          </div>
          <!-- 签约周期 -->
          <div class="cardd">
            <p class="name">
              <span>签约周期</span>
            </p>
            <p class="msg_data">
              <span>{{ signInformation.contract_period }}</span>
            </p>
          </div>
          <!-- 费用 -->
          <div class="cardd">
            <p class="card_1">
              <span>费用</span>
            </p>
            <p class="msg_care">
              <span>{{ signInformation.cost }}</span>
            </p>
          </div>
        </div>
        <!-- 第三行数据 -->
        <div class="msgg">
          <!-- 签约类型 -->
          <div class="cardd">
            <p class="name">
              <span>签约类型</span>
            </p>
            <p class="msg_data">
              <span>{{ signInformation.contract_type }}</span>
            </p>
          </div>
          <!-- 申请时间 -->
          <div class="cardd">
            <p class="name">
              <span>申请时间</span>
            </p>
            <p class="msg_data">
              <span>{{ signInformation.timeof_payment }}</span>
            </p>
          </div>
          <!-- 生效日期 -->
          <div class="cardd">
            <p class="name">
              <span>生效日期</span>
            </p>
            <p class="msg_data">
              <span>{{ signInformation.commencement_date }}</span>
            </p>
          </div>
          <!-- 签约备注 -->
          <div class="cardd">
            <p class="card_1">
              <span>签约备注</span>
            </p>
            <p class="msg_care">
              <span>{{ signInformation.signeda_note }}</span>
              <span>{{ signInformation.signeda_note }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 第二行 -->
    <div class="line111">
      <!-- 表格标题 -->
      <div class="line11_1">
        <div class="linetitle1">签约记录</div>
        <!-- 表格 -->
        <div class="sign_table">
          <el-table
            :data="signTable"
            stripe
            style="width: 1100px"
            :header-cell-style="{
              background: 'silver',
              color: '#606266',
              height: '50px',
            }"
          >
            <el-table-column
              prop="record_id"
              label="编号"
              width="130"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="record_organization"
              label="签约机构"
              width="130"
              align="center"
            >
            </el-table-column>

            <el-table-column
              prop="record_doctor_team"
              label="签约医生团队"
              width="150"
              align="center"
            >
            </el-table-column>

            <el-table-column
              prop="contract_doctor"
              label="签约医生"
              width="120"
              align="center"
            >
            </el-table-column>

            <el-table-column
              prop="record_server"
              label="服务包"
              width="130"
              align="center"
            >
            </el-table-column>

            <el-table-column
              prop="timeof_payment"
              label="申请时间"
              width="150"
              align="center"
            >
            </el-table-column>

            <el-table-column
              prop="date_due"
              label="到期时间"
              width="150"
              align="center"
            >
            </el-table-column>

            <el-table-column label="操作" width="140" align="center">
              <template>
                <el-button type="text" size="small"
                  ><font style="color: blue">查看详情</font></el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //父nameDetail传过来的id值
  data() {
    return {
      signInformation: {},
      signTable: [],
      ids:null
    };
  },
  
  created() {
    this.ids = this.$route.query.id;
    this.getSignInformation();
    this.getSignTable();
   
  },
  methods: {
    getSignInformation() {
     this.$axios({
        url: "api/record/findRecordByPid",
        method: "get",
        params: {
          pid: this.ids,
        },
      }).then((res) => {
        this.signInformation = res.data[0];
        // alert(this.signInformation.date_due)
        console.log(res);
        console.log(
          "查看签约信息页面数据根据服务id查看的页面数据-------------"
        );
      });
    },
    getSignTable() {
      this.$axios({
        url: "api/record/findRecordByPid",
        method: "get",
        params: {
          pid: this.ids,
        },
      }).then((res) => {
        this.signTable = res.data;
        console.log(res);
      });
    },
    editor() {
      // 个人签约记录里的编辑信息  跳转到页面
      console.log("跳转到签约记录的编辑页面");
      this.$router.push({
        path: "/editSignInfo",
        query: {
          editorId: this.signInformation.contractEntity.contractId,
        },
      });
    },
  },


};
</script>

<style>
.big_div1 {
  width: 1150px;
  height: 1000px;
  background-color: #ffffff;
}
.line11 {
  width: 1100px;
  height: 250px;
  background-color: #f2f7fb;
  margin: auto;
}
/* 表格的div 表格div铺上数据之后太短的话改这里！！！！！！！！！！ */
.line111 {
  width: 1100px;
  height: 250px;
}
.line11_1 {
  float: left;
  margin: 30px 20px;

  height: 20px;
  width: 1100px;
  /* background-color: aquamarine; */
}
.linetitle1 a {
  font-size: 14px;
  color: rgb(48, 80, 243);
}
.name {
  font-size: 14px;
  color: gray;
  margin-right: 10px;
  float: left;
  width: 60px;
  margin-left: 25px;
  position: none;
}
.msg_data {
  float: left;
  width: 160px;
  font-size: 14px;
  color: #2984f3;
}

.cardd {
  float: left;
  margin-left: 15px;
  width: 260px;
  height: 30px;
  line-height: 30px;
}
.card_b {
  float: left;
  margin-left: 30px;
  width: 550px;
  height: 30px;
  line-height: 30px;
}
.card_1 {
  font-size: 14px;
  color: gray;
  margin-right: 10px;
  float: left;
  width: 60px;
  margin-left: 10px;
}
.msg_care {
  float: left;
  width: 71px;
  font-size: 14px;
  /* color: #2984f3; */
  margin-right: 10px;
}
.msg_care_1 {
  float: left;
  width: 250px;
  font-size: 14px;
  /* color: #2984f3; */
  margin-right: 10px;
}
.msgg {
  width: 1150px;
  height: 35px;
  margin-top: 25px;
}
.sign_table {
  margin-top: 25px;
}
.signInfoBtn {
  margin-left: 30px;
}
</style>